<template>
  <main class="wss-container">
    <div class="tab-box">
      <ComTabs
        @EventSelectTab="currentSelect"
        :activeName="activeName"
        :tabList="tabList"
      ></ComTabs>
    </div>
    <div class="main-box">
      <Set v-if="activeName == 'set'"></Set>
      <ConsultCategory
        v-else-if="activeName == 'consultCategory'"
      ></ConsultCategory>
      <ConsultWay v-else></ConsultWay>
    </div>
  </main>
</template>

<script>
import ComTabs from "@/wss/components/ComTabs.vue";
import Set from "@/wss/newViews/product/consult/set.vue";
import ConsultCategory from "@/wss/newViews/product/consult/consultCategory.vue";
import ConsultWay from "@/wss/newViews/product/consult/consultWay.vue";

export default {
  components: { ComTabs, ConsultCategory, ConsultWay, Set },

  data() {
    return {
      activeName: "consultCategory",
      // tab页数据
      tabList: [
        {
          label: "咨询类别",
          name: "consultCategory",
        },
        {
          label: "咨询设置",
          name: "set",
        },
        {
          label: "咨询方式",
          name: "consultWay",
        },
      ],
    };
  },
  methods: {
    currentSelect({ label, index, name }) {
      console.log(name, "搞定了搞定了");
      this.activeName = name;
    },
  },
};
</script>

<style scoped>
.wss-container{
  display: flex;
  flex-direction: column;
}
.wss-container .tab-box{
  height: 40px;
  margin-bottom: 20px;
}
.wss-container .main-box {
  height: calc(100% - 60px);
}
</style>